<template>
  <div>
    <div class="navigationContainer">
      <el-col :span="20" style="min-height: 100%">
      <el-menu
        default-active="home"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        router
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/navigation/home">
          <i class="el-icon-picture"></i>
          <span>图片管理</span>
        </el-menu-item>
        <el-menu-item index="logistics">
          <i class="el-icon-document"></i>
          <span slot="title">物流线路管理</span>
        </el-menu-item>
        <el-menu-item index="user">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div class="userBar">
      <el-dropdown>
        <div  class="el-dropdown-link">
          <el-avatar v-if="!avatarURL"  shape="square" :src="circleUrl"></el-avatar>  
          <el-avatar v-if="avatarURL"  shape="square" :src="avatarURL"></el-avatar>  
        </div>      
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <div>
              <input type="file" style="display: none" id="file" @change = "loadImg">
              <label for="file"><span >上传头像</span></label>
            </div>
          </el-dropdown-item>
          <el-dropdown-item><div @click="outload">退出登录</div></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      imgUrl: "",
      avatarURL: ""
      // size: "50"
    }
  },
  methods: {
    async loadImg(e) {
      let files = e.target.files;
      console.log(files);
      if(!files.length) return;
      let formdata = new FormData();
      if(files.length) {
        let i = 0;
        formdata.append( i , files[0]);
      }
      let user = window.localStorage.getItem("user");
      console.log(JSON.parse(user)[0]);
      formdata.append("userId", JSON.parse(user)[0].user_id);
      console.log(JSON.parse(user)[0].user_id);
      let id = JSON.parse(user)[0].user_id;
      console.log(formdata.get("userId"));
      let res = await this.$axios.post("/uploadImg/" + id, formdata);
      console.log(res);
      console.log(res.data.url);
      this.avatarURL = "http://localhost:3000/getAvatar/" + res.data.url;
      // let reslut = await this.$axios.get("");
      let newUser = JSON.parse(user);
      newUser[0].user_avatar = res.data.url;
      console.log(newUser);
      console.log(JSON.parse(user));
      window.localStorage.setItem("user", JSON.stringify(newUser));
      console.log(JSON.parse(window.localStorage.getItem("user")));
    },
    outload() {
      // console.log("");
      window.localStorage.removeItem("user");
      this.$router.push({name: "HelloWorld"})
    }
  },
  async mounted() {
    let url = JSON.parse(window.localStorage.getItem("user"))[0].user_avatar;
    // let res = await this.$axios.get("/getAvatar/" + url);
    // console.log(res);
    console.log(url);
    console.log(JSON.parse(window.localStorage.getItem("user")));
    this.avatarURL = "http://localhost:3000/getAvatar/" + url;
  }
}
</script>

<style scoped>
  .userBar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
</style>